<template>
  <div class="project-search">
    <el-input 
      v-model="searchQuery" 
      placeholder="请输入项目名称" 
      @blur="fetchProjects" 
      clearable
      size="large"
    />
  </div>
  <div class="project-list">
    <div 
      v-for="(project, index) in filteredProjects" 
      :key="project.id" 
      :class="['project-item', { 'highlighted':  activeIndex ===index }]" 
      @click="setActiveIndex(index)"
    >
      {{ project.name }}
    </div>
  </div>
  <div class="save-button" style="position: fixed; bottom: 30px; z-index: 9999; width: 100%; text-align: center;">
    <el-button type="primary" @click="saveProjects" size="large" style="width: 80%; margin: auto; font-size: 22px;">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue';
import { getProjectList,getWeComSignature } from "@/api/project"

interface Project {
  id: number;
  name: string;
}

const projects = ref<Project[]>([
]);
const loading = ref<boolean>(false);
const searchQuery = ref<string>('');

const fetchProjects = () => {
  loading.value = true;
  getProjectList({
    name: searchQuery.value,
    pageSize:9999,
    currentPage:1
  }).then((res: any) => {
    projects.value = res.data;
    const key = window.location.href.split('key=')[1]; // 获取URL中key的值
    console.log(key, 'key');
    const matchingIndex = projects.value.findIndex(project => project.projectId == key);
    if (matchingIndex !== -1) {
        activeIndex.value = matchingIndex;
        console.log( activeIndex.value ,' activeIndex.value  activeIndex.value ')
    }
  }).catch(() => {
    projects.value = [];
  }).finally(() => {
    loading.value = false;
  });
};

const filteredProjects = computed(() => {
  return projects.value.filter(project => 
    project.name.includes(searchQuery.value)
  );
});

const activeIndex = ref(0);

const setActiveIndex = (index: number) => {
  activeIndex.value = index;
};

const saveProjects = () => {
  console.log(filteredProjects.value[activeIndex.value],'activeIndex.valueactiveIndex.value')
  let selectedData=[{
    key:filteredProjects.value[activeIndex.value].projectId,
    value:filteredProjects.value[activeIndex.value].name
  }]
  wx.invoke('saveApprovalSelectedItems', {
      "key": window.location.href.split('key=')[1], // 字符串，从 URL 中获取到的 key
      "selectedData":JSON.stringify(selectedData) // 字符串，选中的选项格式化为 JSON 字符串，格式见下文
  }, (res) => {
      if (res.err_msg === 'saveApprovalSelectedItems:ok') {
          // 保存成功
      }
  });
}

onMounted(() => {
  fetchProjects();
  getJsSign()
});

watch(searchQuery, (newValue) => {
  if (!newValue) {
    fetchProjects();
  }
});
const getJsSign = ()=> {
      let url = window.location.href.split('#')[0]
      // console.log("window.location.href->", window.location.href)
      // console.log("url->", url)
      let params = {'url': url}
      getWeComSignature({}).then((res) => {
        console.log("config接收后端参数->", res)

        //获取签名

        wx.config({
          beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: 'wwe178ef7b6c92b8c9', // 必填，企业微信的corpID
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
      })

      wx.ready(function () {
        //执行完wx.config后就会执行wx.ready
        // 如果想不点击按钮，调用完后直接调用企业微信内置功能，在这里写需要调用的功能方法
          getWeComSignature({}).then((res) => {
            console.log("config接收后端参数->111111", res)

            wx.agentConfig({
              corpid: res.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: res.agentId, // 必填，企业微信的应用id （e.g. 1000247）
              timestamp: res.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.nonceStr, // 必填，生成签名的随机串
              signature: res.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: [], //必填，传入需要使用的接口名称
            success: function (res) {
              // 回调
              console.log(res);
            },
            fail: function (res) {
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            }
          })
        })

        // wx.checkJsApi({
        //   jsApiList: ['selectEnterpriseContact', 'selectExternalContact', 'chooseImage', 'scanQRCode', 'shareWechatMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //   success: function (res) {
        //     console.log("checkJsApi 识别哪些api可以调用，不能调用的级信你个隐藏按钮功能操作！->",res)
        //     // 以键值对的形式返回，可用的api值true，不可用为false
        //     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //   }
        // });
        // alert("ready.config成功")
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。



        // wx.invoke('openUserProfile', {
        //   "type": 1, //1表示该userid是企业成员，2表示该userid是外部联系人
        //   "userid": "ZeXin" //可以是企业成员，也可以是外部联系人
        // }, function (res) {
        //   if (res.err_msg != "openUserProfile:ok") {
        //     //错误处理
        //   }
        // });



      });


      wx.error(function (res) {
        // alert(  JSON.stringify(res)  )

        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });

    }
</script>

<style scoped>
.project-search {
  padding: 30px;
  box-sizing: border-box;
}

.project-list {
  display: flex;
  flex-direction: column;
  padding: 0px 30px;
  box-sizing: border-box;
}

.project-item {
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s;
}

.project-item.highlighted {
  background-color: #e6a23c;
  color: #fff;
  font-weight: bold;
  border-radius: 10rpx;
  overflow: hidden;
}
</style>
